<template>
  <div>
    <el-card style="margin:20px">
      <!-- 搜索栏 -->
      <el-row :inline="true" type="flex">
        <!-- 表单 -->
        <el-form :inline="true" :model="formData" :label-position="labelPosition">
          <el-form-item label="任务编号">
            <el-input v-model="formData.code" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="货主名称">
            <el-input v-model="formData.ownerName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="收货状态">
            <!-- <el-input v-model="formData.status" placeholder="请输入" /> -->
            <el-select v-model="formData.status" placeholder="请选择" style="width:185px">
              <el-option
                v-for="item in statusList"
                :key="item.statusNum"
                :label="item.statusName"
                :value="item.statusNum"
              />
            </el-select></el-form-item>
          <el-form-item style="margin-top:50px ; margin-left:200px">
            <el-button class="search" round @click="searchBtn">搜索</el-button>
          </el-form-item>
          <el-form-item style="margin-top:50px">
            <el-button round style="color:black" class="reset" @click="resetBtn">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
    <el-card style="margin:20px">
      <el-button round class="add-btn">收货完成</el-button>
      <!-- 表单 -->
      <template>
        <el-table :data="tableData" border style="width: 70vw; margin:20px" header-align="center" align="center">
          <el-table-column
            type="selection"
            width="40"
            fixed
          />
          <el-table-column
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column
            prop="code"
            label="收货任务编号"
            width="120"
          />
          <el-table-column
            prop="receiptCode"
            label="入库单号"
            width="120"
          />
          <el-table-column
            prop="createName"
            label="创建人"
            width="120"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="120"
          />
          <el-table-column
            prop="ownerName"
            label="货主名称"
            width="120"
          />
          <el-table-column
            prop="warehouseName"
            label="仓库名称"
            width="120"
          />
          <el-table-column
            prop="areaName"
            label="库区名称"
            width="120"
          />
          <el-table-column
            prop="planNum"
            label="预计到货数"
            width="120"
          />
          <el-table-column
            :formatter="formatStatus"
            prop="status"
            label="收货状态"
            width="120"
          />
          <el-table-column
            prop="receiverName"
            label="收货人"
            width="120"
          />
          <el-table-column
            prop="realNum"
            label="实收总数"
            width="120"
          />
          <el-table-column
            prop="differenceNum"
            label="收货差异"
            width="120"
          />
          <el-table-column
            prop="completionTime"
            label="收货完成时间"
            width="120"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="150"
          >
            <template v-slot="scope">
              <el-button type="text" @click="checkDetail(scope.row.masterId)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          :page-size="+pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+total"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getReceivingNote } from '@/api/stork'
// 引入枚举
import EmployeeEnum from '@/constant/stock'
export default {
  data() {
    return {
      labelPosition: 'top',
      formData: {
        code: '', // 任务编号
        ownerName: '', // 货主名称
        status: '' // 收货状态
      },
      tableData: [],
      // 分页数据
      total: 0,
      pageInfo: {
        current: 1,
        size: 2
      },
      // 状态下拉框
      statusList: [{ statusName: '待分配', statusNum: 1 },
        { statusName: '收获中', statusNum: 2 },
        { statusName: '收货完成', statusNum: 3 },
        { statusName: '已取消', statusNum: 4 }]

    }
  },
  created() {
    this.loadpage()
  },
  methods: {
    // 封装收货单
    async loadpage() {
      const res = await getReceivingNote()
      console.log(res.data.data.records)
      this.tableData = res.data.data.records
      this.pageInfo.current = res.data.data.current
      this.pageInfo.size = res.data.data.size
      this.total = res.data.data.total
    },
    checkDetail(id) {
      this.$router.push(`/stock/receiving-task/sure/${id}`)
    },
    // 搜索
    async searchBtn() {
      const res = await getReceivingNote(this.formData)
      console.log(res.data.data.records)
      this.tableData = res.data.data.records
    },
    // 重置
    resetBtn() {
      this.formData = {
        code: '', // 任务编号
        ownerName: '', // 货主名称
        status: '' // 收货状态
      }
    },
    formatStatus(row, col, val) {
      // 利用枚举格式化数据
      const res = EmployeeEnum.statusType.find(item => item.id === val)
      return res ? res.value : '未知'
    }

  }
}
</script>

<style scoped lang='scss'>

.cell {
 .el-button--text {
  color: $table-operate;
 }
}

.search{
  background-color: $btn-search
}
.reset{
  background-color: $btn-reset
}
.add-btn {
 width: 120px;
 margin: 10px 0;
 background-color: $table-add;
 color: white;
}
</style>

